<template>
	<div>
		<!-- 这些是样式，可自定义 -->
		<el-menu background-color="#fafcfc" text-color="#3C3C3C" class="menu el-menu-vertical-menu" unique-opened
			@open="handleOpen" @close="handleClose">
			<!-- 循环菜单数据 -->
			<label v-for="item in menuData" :key="item.classificationId">
				<!-- 判断是否有子菜单，如果有就创建submenu，没有就创建menu-item -->
				<el-submenu :index="item.classificationId+''" v-if="item.child">
					<template slot="title">
						<span>{{ item.classificationName }}</span>
					</template>
					<label>
						<!-- 自己调用自己 -->
						<!-- 这里注意调用自己时，被调用组件$emit通知的时当前组件下的函数。无限极通过不断调用自己父级的方法again来玄幻最终通知到最外层组件。在最外层组件通过id去调取接口或者做其他处理 -->
						<menuDemo :menuData="item.child" @showCityName="againn"></menuDemo>
					</label>
				</el-submenu>
				<el-menu-item v-else :index="item.classificationId+''">
					<template slot="title">
						<span>{{ item.classificationName }}</span>
					</template>
				</el-menu-item>
			</label>
		</el-menu>
	</div>
</template>

<script>
	var _self;
	// 当前位置
	import menuDemo from "@/components/menuDemo.vue";
	export default {
		name: "menuDemo",
		components: {
			menuDemo,
		},
		props: {
			menuData: {
				type: Array
			},
			again:{
				type:Object
			}
		},
		data() {
			return {};
		},
		created() {
			_self = this;
		},
		methods: {
			againn(key){
				this.$emit('showCityName',key);
			},
			// 点击时向父级调用方法，key代表id
			handleOpen(key) {
				this.$emit('showCityName',key);
			},
			handleClose(key) {
			}
		},
	};
</script>

<style scoped>
	.menu {
		width: 180px !important;
		border-radius: 0.1rem;
		margin: 0 0 0 0.4rem;
		margin-bottom: 0.5rem;
		overflow-y: auto;
		overflow-x: hidden;
		display: block;
		position: relative;
	}
</style>
